<template>
  <div>
    <search-form @search="handleSearch"></search-form>
    <el-table :data="tableData" border style="width: 100%" :default-sort="{prop: 'time', order: 'descending'}">
      <el-table-column prop="ip" label="ip" width="180">
      </el-table-column>
      <el-table-column prop="phone" label="电话" width="180">
      </el-table-column>
      <el-table-column prop="physicalAddress" label="地址">
      </el-table-column>
      <el-table-column prop="time" label="时间" sortable="">
      </el-table-column>
      <el-table-column prop="url" label="请求路径">
      </el-table-column>
      <el-table-column prop="requestType" label="请求方式">
      </el-table-column>
      <el-table-column prop="username" label="用户名">
      </el-table-column>
    </el-table>
    <div class="pagination-wrapper">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pData.currentPage" :page-sizes="pData.pageSizes" :page-size="pData.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pData.total" background>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getoperation } from "@/api";
import { pagination } from "@/mixins/pagination";
import searchForm from "./searchForm.vue";
export default {
  mixins: [pagination],
  components: {
    searchForm,
  },
  data() {
    return {
      // 当前页数
      current: 1,
      // 当前每页显示多少条数据
      tableData: [],
      tempParams: null,
    };
  },
  methods: {
    handleSearch(filter) {
      if (!Object.keys(filter).length) {
        this.tempParams = null;
      }
      this.getData(filter);
    },
    getData(filter) {
      filter = filter || this.tempParams;
      let params = {
        current: this.pData.currentPage,
        size: this.pData.pageSize,
      };
      if (filter && Object.keys(filter).length) {
        Object.assign(params, filter);
        this.tempParams = filter;
      }
      if (this.tempParams) {
        Object.assign(params, this.tempParams);
      }
      getoperation(params).then((res) => {
        this.tableData = res.data.data.list;
        this.pData.total = res.data.data.total;
        console.log(this.tableData);
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style>
.pagination-wrapper {
  padding: 24px;
  text-align: right;
}
</style>
